<script setup lang="ts">
import {ref} from "vue";
import {isNull} from "@utils/stringUtil.js";
import axiosInstance from "@utils/axiosInstance.js";
import {globalConst} from "@constants/globalConst.js";
import ResponseResult from "@models/ReturnResult.js";
import {useGlobalConfirm} from "@utils/ConfirmDialogPlugin.js";
import {jump} from "@utils/router.js";

const nextStep = ref(false)
const errorMessage = ref('')
const email = ref('')
const token = ref('')
const emailPattern = /^(?:(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*)|(?:".+"))@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}|(?:\[(?:\d{1,3}\.){3}\d{1,3}\]))$/
const isFrozen = ref(true)

function clsError() {
  errorMessage.value = ''
}


async function sendEmail() {
  if (isNull(email)) {
    errorMessage.value = '请输入邮箱信息!'
    return
  }
  if (!emailPattern.test(email.value)) {
    errorMessage.value = '邮箱格式不正确!请输入正确的格式邮箱信息!'
    return
  }
  const result =
      isFrozen.value ?
          await axiosInstance.post(`${globalConst.baseUrl}login/frozenUser/sendEmail`, {
            'email': email.value
          }, {
            headers: {
              'Content-Type': 'application/json'
            }
          }) :
          await axiosInstance.post(`${globalConst.baseUrl}login/unfrozenUser/sendEmail`, {
            'email': email.value,
            'newPassword': newPassword.value
          }, {
            headers: {
              'Content-Type': 'application/json'
            }
          })
  const r = ResponseResult.fromApiResponse(result.data)
  !r.isSuccess() ?
      alert("邮件发送失败!因为:" + r.msg) :
      alert(r.returnResult)
  nextStep.value = r.isSuccess()
}

const newPassword = ref('')
const confirmPassword = ref('')

async function suit() {
  if (newPassword.value !== confirmPassword.value) {
    alert('新密码与确认密码不一致')
    return
  }
  if (isNull(token.value)) {
    alert('请输入令牌!')
    return
  }
  const r = isFrozen.value ?
      await axiosInstance.post(`${globalConst.baseUrl}login/frozenUser/verify`, {
        'token': token.value
      }) :
      await axiosInstance.post(`${globalConst.baseUrl}login/unfrozenUser/verify`, {
        'token': token.value
      })
  const result = ResponseResult.fromApiResponse(r.data)
  if (isFrozen.value) {//冻结
    result.isSuccess() ?
        alert(result.returnResult) :
        alert('解冻操作失败!因为' + result.msg)
    return
  }
  //解冻状态
  const confirm = useGlobalConfirm()
  const confirmResult = await confirm("您的账户已解冻成功!是否跳转到登录页面?", {
    title: "账户已解冻",
    trueText: "是的",
    falseText: "不,返回首页"
  })
  confirmResult ? jump('src/page/login/index.html') :
      jump('src/page/home/index.html')
}
</script>

<template>
  <h3>{{ isFrozen ? "冻结" : "解冻" }}您的账号</h3>
  <button @click="isFrozen = !isFrozen">切换至{{ !isFrozen ? "冻结" : "解冻" }}页面</button>
  <div v-if="!nextStep">
    <p v-show="!isNull(errorMessage)&&emailPattern.test(email)">{{ errorMessage }}</p>
    <label>
      您注册时使用的邮箱:
      <input type="text" v-model="email" placeholder="您的邮箱"
             required @focus="clsError">
    </label>
    <button @click="sendEmail">发送{{ isFrozen ? "冻结" : "解冻" }}账号邮件</button>
    <p v-show="!isNull(email)&&emailPattern.test(email)">发送{{ isFrozen ? "冻结" : "解冻" }}账号信息到此邮箱:{{
        email
      }}</p><br>
    <p v-show="!isNull(email)&&!emailPattern.test(email)">当前的邮箱格式不正确~</p>
    <label v-show="!isFrozen">
      输入您的新密码:
      <input type="password" v-model="newPassword" placeholder="请输入您的新密码"
             required>
    </label>
    <label v-show="!isFrozen">
      确认您的新密码:
      <input type="password" v-model="confirmPassword" placeholder="确认您的新密码"
             required>
    </label>
    <label>
      已经获取了令牌?点击这里或者按钮进行下一步<br>
      <button @click="nextStep=!nextStep">下一步</button>
    </label>
  </div>
  <div v-else>
    <button @click="nextStep=!nextStep">返回上一步</button>
    <br>
    <label>
      在此处贴上我们发送至您邮箱的令牌:
      <input type="password" v-model="token" placeholder="令牌信息"
             required>
    </label>
    <button @click="suit">{{ isFrozen ? "冻结" : "解冻" }}我的账号</button>
  </div>
</template>

<style scoped>
/* ======== 冻结/解冻容器 ======== */
h3 {
  text-align: center;
  font-size: 1.8em;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 8px rgba(255, 42, 109, 0.3);
}

/* ======== 切换按钮 ======== */
button:first-of-type {
  display: block;
  margin: 0 auto 2rem auto;
  background: var(--secondary-gray);
  border-color: var(--secondary-gray-light);
  border-radius: 12px;
  padding: 0.6rem 1.2rem;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
}

button:first-of-type:hover {
  background: var(--secondary-gray-light);
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px rgba(77, 195, 255, 0.5);
  transform: translateY(-2px);
}

/* ======== 主容器 ======== */
div {
  width: 85%;
  max-width: 500px;
  margin: 0 auto 2rem auto;
  padding: 2rem;
  border-radius: 16px;
  background: rgba(26, 26, 26, 0.35);
  backdrop-filter: blur(5%);
  box-shadow: 0 8px 30px rgba(255, 42, 109, 0.1);
  border: 1px solid rgba(255, 42, 109, 0.2);
  animation: fadeIn 0.6s ease-out;
  transition: all 0.3s ease;
}

div:hover {
  box-shadow: var(--shadow-primary);
  border-color: var(--border-primary);
}

/* ======== 冻结状态特殊样式 ======== */
div[v-if="!nextStep"] {
  background: rgba(40, 0, 0, 0.35);
  border-color: rgba(255, 42, 109, 0.3);
}

/* ======== 解冻状态特殊样式 ======== */
div[v-else] {
  background: rgba(0, 40, 0, 0.35);
  border-color: rgba(0, 255, 0, 0.3);
}

/* ======== 错误信息 ======== */
p[v-show] {
  color: #ff6b6b;
  font-weight: 600;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  margin-bottom: 1rem;
  text-align: center;
}

/* ======== 标签样式 ======== */
label {
  display: block;
  margin-bottom: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

label:last-of-type {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-secondary);
}

/* ======== 输入框样式 ======== */
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
  border: 2px solid var(--secondary-gray);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1em;
  transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 10px rgba(211, 54, 255, 0.3);
}

input::placeholder {
  color: var(--text-muted);
}

/* ======== 按钮样式 ======== */
button:not(:first-of-type) {
  border-radius: 12px;
  border: 2px solid transparent;
  padding: 0.8rem 1.6rem;
  font-size: 1em;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-purple));
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin: 0.5rem 0;
  box-shadow: var(--shadow-primary);
}

button:not(:first-of-type)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

button:not(:first-of-type):hover::before {
  left: 100%;
}

button:not(:first-of-type):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  border-color: var(--primary-red-light);
}

button:not(:first-of-type):active {
  transform: scale(0.97);
}

/* ======== 信息提示 ======== */
p:not([v-show]) {
  color: var(--text-secondary);
  font-size: 0.9em;
  line-height: 1.5;
  margin: 0.8rem 0;
  padding: 0.8rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}

/* ======== 邮箱验证状态 ======== */
p[v-show*="emailPattern"] {
  color: #ff9bb4;
  font-weight: 500;
  background: rgba(255, 155, 180, 0.1);
  border: 1px solid rgba(255, 155, 180, 0.3);
}

/* ======== 下一步按钮特殊样式 ======== */
label:last-of-type button {
  background: var(--accent-blue);
  margin-top: 1rem;
}

label:last-of-type button:hover {
  background: var(--accent-blue-light);
  box-shadow: 0 0 12px rgba(77, 195, 255, 0.5);
}

/* ======== 返回上一步按钮 ======== */
div[v-else] button:first-child {
  background: var(--secondary-gray);
  border-color: var(--secondary-gray-light);
  margin-bottom: 1.5rem;
}

div[v-else] button:first-child:hover {
  background: var(--secondary-gray-light);
  border-color: var(--accent-blue);
}

/* ======== 冻结/解冻操作按钮 ======== */
div[v-else] button:last-child {
  margin-top: 1.5rem;
  width: 100%;
  font-size: 1.1em;
  padding: 1rem;
}

/* ======== 解冻状态下的密码输入框 ======== */
label[v-show="!isFrozen"] {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 255, 0, 0.2);
}

/* ======== 动画效果 ======== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======== 响应式设计 ======== */
@media (max-width: 768px) {
  div {
    width: 90%;
    padding: 1.5rem;
    margin: 0 auto 1.5rem auto;
  }

  h3 {
    font-size: 1.5em;
  }

  button:not(:first-of-type) {
    padding: 0.7rem 1.4rem;
    font-size: 0.95em;
  }
}

@media (max-width: 480px) {
  div {
    width: 95%;
    padding: 1rem;
  }

  h3 {
    font-size: 1.3em;
  }

  input[type="text"],
  input[type="password"] {
    padding: 0.7rem 0.9rem;
  }

  button:not(:first-of-type) {
    padding: 0.6rem 1.2rem;
    font-size: 0.9em;
  }
}
</style>
